import { observer } from "mobx-react-lite";
import { useEffect } from "react";
import { useRootStore } from "../store/store";

function Login() {
  const { todoStore, authStore } = useRootStore();

  const login = () => {
    authStore.login();
  };

  const logout = () => {
    authStore.logout();
  };

  return (
    <div>
      {authStore.isLogin ? (
        <div>
          <span>your todo count: {todoStore.todoCount}</span>
          <button onClick={logout}>登出</button>
        </div>
      ) : (
        <button onClick={login}>登录</button>
      )}
    </div>
  );
}

export default observer(Login);
